<template>
    <div id="index">
        <div class="hidden">
        <vs-sidebar
          absolute
          v-model="active"
          open
          >

          <template #logo>
            <img src="../assets/iami-logo-t.png" style="max-height: 500px !important;">
         </template>
            
          <vs-sidebar-item id="home" to="/index">
            <template #icon>
              <i class='bx bx-home'></i>
            </template>
            {{ $t('m.Left_Home') }}
          </vs-sidebar-item>
          <vs-sidebar-item id="Music">  
            <template #icon>
              <i class='bx bxs-music'></i>
            </template>
            {{ $t('m.Left_Music') }}
          </vs-sidebar-item>


          <!-- 音乐生成 -->
          <vs-sidebar-group>
            <template #header>
              <vs-sidebar-item arrow>
                <template #icon>
                  <i class='bx bx-code-alt' ></i>
                </template>
                {{ $t('m.Left_MusicGene') }}
              </vs-sidebar-item>
            </template>

            <vs-sidebar-item id="github">
              <template #icon>
                <i class='bx bxl-github' ></i>
              </template>
              Github
            </vs-sidebar-item>
            <vs-sidebar-item id="codepen">
              <template #icon>
                <i class='bx bxl-codepen'></i>
              </template>
              Codepen
            </vs-sidebar-item>
            <vs-sidebar-item id="discord">
              <template #icon>
                <i class='bx bxl-discord'></i>
              </template>
              Discord
            </vs-sidebar-item>
            <vs-sidebar-item id="Javascript">
              <template #icon>
                <i class='bx bxl-javascript' ></i>
              </template>
              Javascript
            </vs-sidebar-item>
            <vs-sidebar-item id="git">
              <template #icon>
                <i class='bx bxl-git' ></i>
              </template>
              Git
            </vs-sidebar-item>
          </vs-sidebar-group>


          <!-- 机器视觉 -->
          <vs-sidebar-group>
            <template #header>
              <vs-sidebar-item arrow>
                <template #icon>
                  <i class='bx bx-group'></i>
                </template>
                {{ $t('m.Left_AICV') }}
              </vs-sidebar-item>
            </template>

            <vs-sidebar-item id="Instagram">
              <template #icon>
                <i class='bx bxl-instagram'></i>
              </template>
              Instagram
            </vs-sidebar-item>
            <vs-sidebar-item id="twitter">
              <template #icon>
                <i class='bx bxl-twitter' ></i>
              </template>
              Twitter
            </vs-sidebar-item>
            <vs-sidebar-item id="Facebook">
              <template #icon>
                <i class='bx bxl-facebook' ></i>
              </template>
              Facebook
            </vs-sidebar-item>
          </vs-sidebar-group>

          <!-- 桌面应用 -->
          <vs-sidebar-group>
            <template #header>
              <vs-sidebar-item arrow>
                <template #icon>
                  <i class='bx bx-group'></i>
                </template>
                {{ $t('m.Left_DesktopApp') }}
              </vs-sidebar-item>
            </template>

          <vs-sidebar-item id="Instagram">
              <template #icon>
                <i class='bx bxl-instagram'></i>
              </template>
              Instagram
            </vs-sidebar-item>
            <vs-sidebar-item id="twitter">
              <template #icon>
                <i class='bx bxl-twitter' ></i>
              </template>
              Twitter
            </vs-sidebar-item>
            <vs-sidebar-item id="Facebook">
              <template #icon>
                <i class='bx bxl-facebook' ></i>
              </template>
              Facebook
            </vs-sidebar-item>
          </vs-sidebar-group>
          
          <!-- 网页开发 -->
          <vs-sidebar-group>
            <template #header>
              <vs-sidebar-item arrow>
                <template #icon>
                  <i class='bx bx-group'></i>
                </template>
                {{ $t('m.Left_WebApp') }}
              </vs-sidebar-item>
            </template>

          <vs-sidebar-item id="Instagram">
              <template #icon>
                <i class='bx bxl-instagram'></i>
              </template>
              Instagram
            </vs-sidebar-item>
            <vs-sidebar-item id="twitter">
              <template #icon>
                <i class='bx bxl-twitter' ></i>
              </template>
              Twitter
            </vs-sidebar-item>
            <vs-sidebar-item id="Facebook">
              <template #icon>
                <i class='bx bxl-facebook' ></i>
              </template>
              Facebook
            </vs-sidebar-item>
          </vs-sidebar-group>

          <!-- 我的乐队 -->
          <vs-sidebar-group>
            <template #header>
              <vs-sidebar-item arrow>
                <template #icon>
                  <i class='bx bx-group'></i>
                </template>
                {{ $t('m.Left_MyBend') }}
              </vs-sidebar-item>
            </template>

          <vs-sidebar-item id="Instagram">
              <template #icon>
                <i class='bx bxl-instagram'></i>
              </template>
              Instagram
            </vs-sidebar-item>
            <vs-sidebar-item id="twitter">
              <template #icon>
                <i class='bx bxl-twitter' ></i>
              </template>
              Twitter
            </vs-sidebar-item>
            <vs-sidebar-item id="Facebook">
              <template #icon>
                <i class='bx bxl-facebook' ></i>
              </template>
              Facebook
            </vs-sidebar-item>
          </vs-sidebar-group>


          
          <!-- 效果器 -->
          <vs-sidebar-group>
            <template #header>
              <vs-sidebar-item arrow>
                <template #icon>
                  <i class='bx bx-group'></i>
                </template>
                {{ $t('m.Left_Pink') }}
              </vs-sidebar-item>
            </template>

          <vs-sidebar-item id="Instagram">
              <template #icon>
                <i class='bx bxl-instagram'></i>
              </template>
              Instagram
            </vs-sidebar-item>
            <vs-sidebar-item id="twitter">
              <template #icon>
                <i class='bx bxl-twitter' ></i>
              </template>
              Twitter
            </vs-sidebar-item>
            <vs-sidebar-item id="Facebook">
              <template #icon>
                <i class='bx bxl-facebook' ></i>
              </template>
              Facebook
            </vs-sidebar-item>
          </vs-sidebar-group>

          <!-- 捐赠 -->
          <vs-sidebar-item id="donate">
            <template #icon>
              <i class='bx bxs-donate-heart' ></i>
            </template>
            {{ $t('m.Left_Donate') }}
          </vs-sidebar-item>

          <!-- 商城 -->
          <vs-sidebar-item id="shopping" disabled>
            <template #icon>
              <i class='bx bxs-shopping-bags'></i>
            </template>
            {{ $t('m.Left_Shop') }}
          </vs-sidebar-item>
          <vs-sidebar-item id="chat" to="/index/about" index="/about">
            <template #icon>
              <i class='bx bx-chat' ></i>
            </template>
            {{ $t('m.Left_About') }}
          </vs-sidebar-item>
          <template #footer>
            <vs-row justify="center" vs-align="center">
              
              <vs-tooltip shadow interactivity>
        <vs-avatar>
          <img src="../assets/e6e9513cd6ebd6cf.jpg" alt="">
        </vs-avatar>
        <template #tooltip>
          <div class="content-tooltip">
            <div class="body">
              <div class="text">
                  Cosed Tasks
                <span>
                89
                </span>
              </div>
              <vs-avatar circle size="80" @click="activeTooltip1=!activeTooltip1">
                <img src="../assets/e6e9513cd6ebd6cf.jpg" alt="">
              </vs-avatar>
              <div class="text">
                  Open Tasks
                <span>
                8
                </span>
              </div>
            </div>
            <footer>
              <vs-button circle icon border>
                <i class='bx bxs-share-alt'></i>
              </vs-button>
              <vs-button circle>
                Message
              </vs-button>
              <vs-button circle icon border>
                <i class='bx bx-like' ></i>
              </vs-button>
            </footer>
          </div>
        </template>
      </vs-tooltip>

            </vs-row>
          </template>
        </vs-sidebar>
        <div class="__animate__fadeIn" style="margin-left: 25%;">
          <transition mode="out-in" enter-active-class="animate__animated animate__fadeIn"  leave-active-class="animate__animated animate__fadeOut">
            <router-view/>
          </transition>
        </div>
        
      </div>

    </div>
  </template>
  
  <script>
  export default {
    
    name: 'index',
    data:() => ({
        active: 'home',
        activeTooltip1: false
      })
  }
  </script>

<style lang="stylus">
getColor(colorx, alpha = 1)
    unquote("rgba(var(--vs-"+colorx+"), "+alpha+")")
getVar(var)
    unquote("var(--vs-"+var+")")

.content-tooltip
  .body
    display flex
    align-items flex-start
    justify-content center
    .vs-avatar-content
      margin-top -30px
      border 3px solid getVar('theme-layout')
      box-shadow 0px 4px 15px 0px rgba(0,0,0,.1)
    .text
      display flex
      align-items center
      justify-content center
      flex-direction column
      font-size .55rem
      padding 10px
      font-weight normal
      span
        font-weight bold
        font-size .7rem
  footer
    display flex
    align-items center
    justify-content center
  h4
    padding 8px
    margin 0px
    text-align left
  p
    text-align left
    padding 0px
    margin 0px
    line-height 1rem
    padding-bottom 5px
    padding-left 8px
</style>
